<template>
    <div class="wrapper">
        <cube-scroll-nav ref="scrollNav"
                :side="true"
                :data="data"
                :current="current"
                :options="options"
                @change="changeHandler"
                @sticky-change="stickyChangeHandler">
            <template #bar="props">
                <cube-scroll-nav-bar #default="ps"
                                     direction="vertical"
                                     :labels="props.labels"
                                     :txts="scrollBarTxts()"
                                     :current="props.current"
                >
                    <template>
                        <div style="position:relative">
                            {{ps.txt.name}}
                            <bubble :number="ps.txt.count"></bubble>
                        </div>
                    </template>
                </cube-scroll-nav-bar>
            </template>
            <cube-scroll-nav-panel
                    v-for="item in data"
                    :key="item.name"
                    :label="item.name"
                    :title="item.name">
                <ul>
                    <li v-for="food in item.foods">
                        <div class="food-wrapper border-bottom-1px">
                            <img :src="food.icon" class="food-img">
                            <div class="food-msg-wrapper">
                                <p>{{food.name}}</p>
                                <p>{{food.description}}</p>
                                <p>月售{{food.sellCount}}份 好评率{{food.rating}}</p>
                                <p>￥{{food.price}}</p>
                                <p class="goods-wanted"><select-goods :food="food"></select-goods></p>
                            </div>
                        </div>
                    </li>
                </ul>
            </cube-scroll-nav-panel>
        </cube-scroll-nav>
    </div>
</template>

<script>
    import SelectGoods from '../select/selectGoods'
    import Bubble from '../bubble/bubble'
    export default {
        name: "goodsMenu",
        props:{
            data: Array,
        },
        data(){return{
            current: '',
            options:{
                click: false,
            }
        }},
        components:{
            SelectGoods, Bubble
        },
        watch:{
            data(){
                this.$refs.scrollNav.refresh()
            }
        },
        methods:{
            stickyChangeHandler(label){
            },
            changeHandler(label){
            },
            scrollBarTxts(){
                let ret= []
                this.data.forEach((goo)=>{
                    let foods= goo.foods
                    let count=0
                    foods.forEach((food)=>{
                        count+= food.count|| 0
                    })
                    ret.push({
                        count,
                        name: goo.name
                    })
                })
                return ret;
            }
        }
    }
</script>

<style scoped lang="stylus">
    .wrapper
        width: 100%
        height: 100%
        position: absolute
        .food-img
            padding-left: 8px
            padding-top: 8px
            max-width: 80px
            max-height: 80px
        .food-wrapper
            display: flex
            .food-msg-wrapper
                width: 100%
                overflow: hidden
                padding-right: 8px;
                padding-bottom:4px
                p
                    padding-top: 4px
                    padding-left:8px
                    .goods-wanted
                        position: relative
    >>> .cube-scroll-nav-bar
        width: 80px
        white-space: normal
    >>> .cube-scroll-nav-bar-item
            background-color: #f0f0f0
    >>> .cube-scroll-nav-bar-item_active
            background-color: white
    >>> .cube-scroll-nav-panel-title
        background-color: #f0f0f0
        padding: 4px 8px
</style>